<route lang="json5">
	{
	needLogin: true,
	style: {
	navigationStyle: 'default',
	navigationBarTitleText: '我的消息',
	},
	}
</route>
<script lang="ts" setup>
	import Notice from './notice.vue'

	import Circle from './circle.vue'

	import Group from './group.vue'

	import { hasNewMsgYnAPi } from '@/service/edu/comment'
	import { msgReadStore } from '@/store/msgReadStatus'
	// 标签页相关
	const activeTab = ref(0)
	const tabs = ['通知公告', '讨论圈', '讨论组']
	const msgIsReadStore = msgReadStore()
	onLoad((query) => {
		if (query.activeTab) {
			activeTab.value = Number(query.activeTab)
		} else {
			// 首次加载时，默认选中第一个tab
			activeTab.value = 0
		}
		getHasNewMsgYn()
	})

	// 获取消息是否未读
	async function getHasNewMsgYn() {
		const res = await hasNewMsgYnAPi()
		if (res?.code === 200) {
			msgIsReadStore.setIsRead(res.data)
		} else {
			console.error('获取消息是否未读失败:', res.msg)
		}
	}
</script>

<template>
	<view class="main_container">
		<!-- 导航栏 -->
		<wd-tabs v-model="activeTab" class="sticky-tabs">
			<wd-tab v-for="(tab, index) in tabs" :key="index" :title="tab" />
		</wd-tabs>
		<!-- 内容页 -->
		<view>
			<template v-if="activeTab === 0">
				<Notice></Notice>
			</template>

			<template v-if="activeTab === 1">
				<Circle></Circle>
			</template>

			<template v-if="activeTab === 2">
				<Group></Group>
			</template>
		</view>
	</view>
</template>

<style scoped>
	.main_container {
		display: flex;
		flex-direction: column;
		/* 子view居中显示 */
		background: #f5f5f5;
	}
	
	.sticky-tabs {
		position: relative;
		z-index: 500;
		background-color: #f5f5f5;
	}
	
	:deep(.wd-tabs__nav-item) {
		font-size: 26rpx !important;
		color: #999999 !important;
	}
	
	:deep(.wd-tabs__nav-item.is-active) {
		font-size: 30rpx !important;
		font-weight: bold !important;
		color: #3d3d3d !important;
	}
</style>